<template>
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="val.window_open"
    :title="val.title"
  >
    <template #content>
      <div class="model" ref="model">
        <div class="_box0">
          <div style="text-align: center; font-size: 16px; padding-bottom: 8px">
            {{ val.data.guild_name }}
          </div>
          <n-grid class="ngrid" y-gap="15" :cols="4">
            <n-gi>
              <n-statistic label="公会排名" :value="val.data.top" />
            </n-gi>
            <n-gi>
              <n-statistic label="伤害要求">{{ val.data.dmg_E }} 亿</n-statistic>
            </n-gi>
            <n-gi>
              <n-statistic label="发布时间">
                <n-time :time="val.data.uptime" type="relative" unix
              /></n-statistic>
            </n-gi>
            <n-gi>
              <n-statistic label="招募到期">
                <n-time :time="val.data.time" format="MM-dd hh:mm" unix
              /></n-statistic>
            </n-gi>
          </n-grid>
          <n-hr />
          <n-space justify="center">
            <n-tag v-for="item in val.data.tag">{{ val.tab_if[item - 1].label }}</n-tag>
          </n-space>
          <n-hr v-if="val.data.tag?.length > 0" />
          <div v-if="val.data.contact?.length >= 1" class="stitle">· 联系方式 ·</div>
          <div class="_box2">{{ val.data.contact }}</div>
          <div v-if="val.data.text?.length >= 1" class="stitle">· 招募文本 ·</div>
          <pre
            style="white-space: pre-wrap; line-height: 2.5"
            v-if="val.data.text?.length >= 1"
            class="_box2"
            >{{ val.data.text }}</pre
          >
          <div class="_box2" v-if="val.data.sendlist?.length >= 1">
            <n-grid x-gap="15" y-gap="15" :cols="3">
              <n-gi v-for="item in val.data.sendlist">
                <a :href="item.url" target="_blank">
                  <img style="width: 100%" :src="item.url" />
                </a>
              </n-gi>
            </n-grid>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <template v-if="cfg.qxpd(['user', 'bz'], val.data.uid) == true">
        <n-button type="gt_y" :disabled="val.subdb" :size="cfg.sizebtn" @click="ct.upd"
          >更新资料</n-button
        >
        <n-button type="gt_n" :disabled="val.subdb" :size="cfg.sizebtn" @click="ct.del"
          >删除招募</n-button
        >
      </template>
    </template>
  </component>
</template>
<script>
import { cfg } from "@/cfg/cfg.js";
import { tab } from "./gselect.js";

export default defineComponent({
  props: {
    window_open: Boolean,
    id: String,
  },
  setup(props, { emit }) {
    const model = ref(null);
    let val = reactive({
      window_open: false,
      title: `公会信息读取中`,
      data: [],
      ...tab,
    });
    let ct = {
      del: async () => {
        const id = props.id;
        try {
          val.loading = true;
          let res = await cfg.axios.get(`${cfg.url}`, {
            params: {
              t: "v2/get",
              t2: "introduction/recruit",
              t3: "del_guild",
              authkey: cfg.user?.authkey,
              uid: cfg.user?.uid,
              id,
            },
          });
          if (res.data?.code == 0) {
            emit("event-refresh", id);
            val.window_open = false;
            return;
          } else {
            val.loading = false;
            cfg.msg.error(res.data?.msg);
            return;
          }
        } catch (error) {
          val.loading = false;
          cfg.msg.error(error);
          return;
        }
      },
      upd: () => {
        emit("event-updinfo", props.id, "load_guild");
      },
      load_guild: async (id) => {
        try {
          let res = await cfg.axios.get(`${cfg.url}`, {
            params: {
              t: "v2/get",
              t2: "introduction/recruit",
              t3: "load_guild",
              id: id,
            },
          });
          if (res.data?.code == 0) {
            val.data = res.data.data;
            val.title = `${val.data.guild_name}公会招募`;
            return;
          } else {
            cfg.msg.error(res.data?.msg);
            val.window_open = false;
            return;
          }
          return;
        } catch (error) {
          cfg.msg.error(error);
          val.window_open = false;
        }
      },
    };

    watch(
      () => val.window_open,
      (newVal) => {
        if (!newVal) {
          emit("event-new");
          setTimeout(() => {
            emit("update:window_open", false);
          }, 250);
        }
      }
    );

    onMounted(async () => {
      cfg.router.push({
        query: {
          ...cfg.route.query,
          loading: props.id,
        },
      });
      val.window_open = true;
      await nextTick();
      await ct.load_guild(props.id);
    });

    return {
      cfg,
      props,
      val,
      ct,
      model,
    };
  },
});
</script>
